<template>
	<div class="card-body">
		<vee-observer v-slot="{invalid, validate}">
			<form @submit.prevent="validate().then(login)">
				<div class="form-group row">
					<label for="email" class="col-md-3 col-form-label text-md-right">邮箱</label>

					<div class="col-md-7">
						<vee-validator name="邮箱" rules="required|email" v-slot="{errors}">
							<input
								id="email"
								type="email"
								class="form-control"
								v-model="email"
								required
								autocomplete="email"
								autofocus
								:class="{'is-invalid':errors[0]}"
							>
							<span v-show="errors[0]" class="invalid-feedback" role="alert">
								<strong>{{errors[0]}}</strong>
							</span>
						</vee-validator>
					</div>
				</div>

				<div class="form-group row">
					<label for="password" class="col-md-3 col-form-label text-md-right">密码</label>

					<div class="col-md-7">
						<vee-validator name="密码" rules="required|min:6|max:255" v-slot="{errors}" ref="back_err">
							<input
								id="password"
								type="password"
								class="form-control"
								v-model="password"
								required
								autocomplete="current-password"
								:class="{'is-invalid':errors[0]}"
							>
							<span v-show="errors[0]" class="invalid-feedback" role="alert">
								<strong>{{errors[0]}}</strong>
							</span>
						</vee-validator>
					</div>
				</div>

				<div class="form-group row">
					<div class="col-md-7 offset-md-3">
						<div class="form-check">
							<input class="form-check-input" type="checkbox" v-model="remember" id="remember">
							<label class="form-check-label" for="remember">保持登录</label>
						</div>
					</div>
				</div>

				<div class="form-group row mb-0">
					<div class="col-md-8 offset-md-3">
						<button type="submit" class="btn btn-primary" :disabled="invalid">登录</button>
						<a class="btn btn-link" href="#">忘记密码?</a>
					</div>
				</div>
			</form>
		</vee-observer>
	</div>
</template>

<script>
export default {
	data() {
		return {
			email: "",
			password: "",
			remember: false
		};
	},
	methods: {
		login() {
			let formData = {
				email: this.email,
				password: this.password
			};
			this.$store
				.dispatch("loginRequest", formData)
				.then(res => {
					this.$router.push({ name: "profile" });
				})
				.catch(err => {
					if (err.response.status && err.response.status === 421) {
						this.$refs.back_err.setErrors([
							"用户名或密码错误，或者账号没有激活"
						]);
					}
					this.logger(err.response);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
</style>
